<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>运行日志</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft Yahei", sans-serif; margin: 1rem; }
    .wrap { max-width: 1100px; margin: 0 auto; }
    .head { display:flex; align-items:center; justify-content:space-between; margin: .5rem 0 1rem; }
    .kb { background:#eef2ff; border:1px solid #c7d2fe; padding:.5rem .75rem; border-radius:.25rem; font-size:.9rem; }
    pre { background: #0b1020; color: #d1d5db; padding: 1rem; border-radius: .5rem; overflow:auto; max-height: 70vh; white-space: pre-wrap; }
    a { color: #4f46e5; text-decoration: none; }
    .muted { color: #666; font-size:.9rem; }
    .ok { color: #16a34a; }
    .err { color: #ef4444; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="head">
      <div>
        <h2 style="margin:.25rem 0;">流水线运行中...</h2>
        <div class="muted">参数：<code>{{ qs }}</code></div>
      </div>
      <div><a href="/" class="kb">返回</a></div>
    </div>

    <pre id="log"></pre>
    <div id="status" class="muted">状态：<span id="stat">连接中...</span></div>
  </div>

  <script>
    const logEl = document.getElementById('log');
    const statEl = document.getElementById('stat');
    const es = new EventSource('/stream?{{ qs|safe }}');
    function append(line) {
      logEl.textContent += line + "\n";
      logEl.scrollTop = logEl.scrollHeight;
    }
    es.onmessage = (ev) => {
      if (!ev || typeof ev.data !== 'string') return;
      append(ev.data);
      if (ev.data.startsWith('EXIT ')) {
        const code = ev.data.substring(5);
        statEl.textContent = '完成，退出码 ' + code;
        es.close();
      }
      if (ev.data.startsWith('ERROR:')) {
        statEl.textContent = '发生错误';
      }
    };
    es.onerror = (e) => {
      statEl.textContent = '连接断开或发生错误';
    };
  </script>
</body>
</html>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>运行日志</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft Yahei", sans-serif; margin: 1rem; }
    .wrap { max-width: 1100px; margin: 0 auto; }
    .head { display:flex; align-items:center; justify-content:space-between; margin: .5rem 0 1rem; }
    .kb { background:#eef2ff; border:1px solid #c7d2fe; padding:.5rem .75rem; border-radius:.25rem; font-size:.9rem; }
    pre { background: #0b1020; color: #d1d5db; padding: 1rem; border-radius: .5rem; overflow:auto; max-height: 70vh; white-space: pre-wrap; }
    a { color: #4f46e5; text-decoration: none; }
    .muted { color: #666; font-size:.9rem; }
    .ok { color: #16a34a; }
    .err { color: #ef4444; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="head">
      <div>
        <h2 style="margin:.25rem 0;">流水线运行中...</h2>
        <div class="muted">参数：<code>{{ qs }}</code></div>
        {% if params and params.get('query') %}
          <div class="muted">Query：<code>{{ params.get('query') }}</code></div>
        {% endif %}
        {% if params and params.get('theme') %}
          <div class="muted">Theme：<code>{{ params.get('theme') }}</code></div>
        {% endif %}
      </div>
      <div><a href="/" class="kb">返回</a></div>
    </div>

    <pre id="log"></pre>
    <div id="status" class="muted">状态：<span id="stat">连接中...</span></div>
  </div>

  <script>
    const logEl = document.getElementById('log');
    const statEl = document.getElementById('stat');
    const es = new EventSource('/stream?{{ qs|safe }}');
    function append(line) {
      logEl.textContent += line + "\n";
      logEl.scrollTop = logEl.scrollHeight;
    }
    es.onmessage = (ev) => {
      if (!ev || typeof ev.data !== 'string') return;
      append(ev.data);
      if (ev.data.startsWith('EXIT ')) {
        const code = ev.data.substring(5);
        statEl.textContent = '完成，退出码 ' + code;
        es.close();
      }
      if (ev.data.startsWith('ERROR:')) {
        statEl.textContent = '发生错误';
      }
    };
    es.onerror = (e) => {
      statEl.textContent = '连接断开或发生错误';
    };
  </script>
</body>
</html>
